<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>FDplayer</title>
	<script type="text/javascript" src="fdPlayer.js"></script>
	<style type="text/css">
		code {
			color: #808080;
			font-family: "Consolas";
		}

		body {
			-webkit-text-size-adjust: 100% !important;
			/*苹果字体防放大*/
		}
	</style>
</head>

<body style="min-width: 1000px;color: #424242;font-family: 微软雅黑;">
	<script type="text/javascript">
		/*安卓字体防放大*/
		(function () {
			var $dom = document.createElement('div');
			$dom.style = 'font-size:10px;';
			document.body.appendChild($dom);
			var scaledFontSize = parseInt(window.getComputedStyle($dom, null).getPropertyValue('font-size'));
			document.body.removeChild($dom);
			var scaleFactor = 10 / scaledFontSize;
			var originRootFontSize = parseInt(window.getComputedStyle(document.documentElement, null).getPropertyValue('font-size'));
			document.documentElement.style.fontSize = originRootFontSize * scaleFactor * scaleFactor + 'px';
		})();
	</script>
	<div style="text-align: center;font-size: 40px;margin: 20px;color: navy;"><b>FDplayer v0.10.1</b></div>
	<div style="text-align: center;font-size: 30px;margin: 25px 0px 5px 0px;">一个简洁的H5触屏播放器</div>
	<div style="text-align: center;font-size: 16px">适用于Firefox&Chromium</div>
	<div style="font-size: 25px;margin: 50px 0px 20px 0px;">
		<div style="width: 800px;margin: 0 auto;">演示视频：<a style="color: #424242;" href="https://www.bilibili.com/video/BV1tW4114742">Hanser-舞池之实.mp4</a></div>
	</div>
	<div id="player" style="overflow: hidden;border-radius:5px; margin: 0 auto;width: 800px;height: 600px;box-shadow:0px 0px 5px rgba(0,0,0,0.5);background-color: rgba(0,0,0,0.5);">
	</div>
    <div style="margin: 0 auto;width: 800px;font-size: 12px;text-align: right;">*视频仅用于项目效果演示，请勿用于其他用途</div>
	<script>
		var player = {
			"width": 800,
			"height": 600,
			"viewWindow": "player",
			"img": "https://shanmaomaoymmm.gitee.io/shanmoamoaymmmprojectdeommedia/FDPlayer-Touch/img/img10.jpg",
			"video":[
				{
					"defaultID":1
				},
				{
					"name": "Hanser-舞池之实",
					"url":"https://archive.qisato.com/fdplayer/video-zh.mp4",
					"subtitles":[
						{
							"defaultID":1
						},{
							"name":"中文",
							"url":"https://shanmaomaoymmm.gitee.io/shanmoamoaymmmprojectdeommedia/FDPlayer-Touch/video/video-zh.vtt"
						},{
							"name":"日语",
							"url":"https://shanmaomaoymmm.gitee.io/shanmoamoaymmmprojectdeommedia/FDPlayer-Touch/video/video-ja.vtt"
						},{
							"name":"English",
							"url":"https://shanmaomaoymmm.gitee.io/shanmoamoaymmmprojectdeommedia/FDPlayer-Touch/video/video-en.vtt"
						}
					]
				},{
					"name": "ダンスフロアの果実",
					"url":"https://archive.qisato.com/fdplayer/video-ja.mp4",
					"subtitles":[
						{
							"defaultID":2
						},{
							"name":"中文",
							"url":"https://shanmaomaoymmm.gitee.io/shanmoamoaymmmprojectdeommedia/FDPlayer-Touch/video/video-zh.vtt"
						},{
							"name":"日语",
							"url":"https://shanmaomaoymmm.gitee.io/shanmoamoaymmmprojectdeommedia/FDPlayer-Touch/video/video-ja.vtt"
						},{
							"name":"English",
							"url":"https://shanmaomaoymmm.gitee.io/shanmoamoaymmmprojectdeommedia/FDPlayer-Touch/video/video-en.vtt"
						}
					]
				}
			],
		}
		fdplayer(JSON.stringify(player))
	</script>

	<div style="margin: 50px;font-size: 20px;">
		<div style="width: 800px;margin: 0 auto;">
			<div style="font-size: 30px;margin-bottom: 25px;">使用帮助</div>
			<div>
				<p>适用于支持触屏的计算机，支持H.264，VP8等格式的视频文件播放*</p>
				<div style="text-align: center;">
					<img src="https://shanmaomaoymmm.gitee.io/shanmoamoaymmmprojectdeommedia/FDPlayer-Touch/img/img05.jpg"
						width="750px" />
				</div>
				<div style="text-align: right;font-size: 10px;">
					*注：具体格式支持请参照HTML5标准中关于&lt;video&gt;的支持情况。
				</div>
			</div>
			<div>
				<p>暂停、播放、全屏、调节播放进度和播放速度(支持PC端x0.25-x16/移动端x1-x3倍速播放)</p>
				<div style="text-align: center;">
					<img src="https://shanmaomaoymmm.gitee.io/shanmoamoaymmmprojectdeommedia/FDPlayer-Touch/img/img04.jpg"
						width="750px" />
				</div>
			</div>
			<div>
				<p>调节播放进度时窗口中央显示播放进度</p>
				<div style="text-align: center;">
					<img src="https://shanmaomaoymmm.gitee.io/shanmoamoaymmmprojectdeommedia/FDPlayer-Touch/img/img01.jpg"
						width="750px" />
				</div>
			</div>
			<div>
				<p>触屏优化：双击暂停&全屏</p>
				<div style="text-align: center;">
					<img src="https://shanmaomaoymmm.gitee.io/shanmoamoaymmmprojectdeommedia/FDPlayer-Touch/img/img03.jpg"
						width="750px" />
				</div>
			</div>
			<div style="text-align: right;font-size: 10px;">
				*注：①不支持各系列IE浏览器。<br />
				②仅支持能够支持HTML5及JavaScript脚本的新版Gecko和Webkit内核的浏览器，如果使用其他浏览器可能会造成显示异常。<br />
				如不能正常显示，请更换您的浏览器。非专业用户推荐使用<a style="color: #424242;"
					href="http://down.360safe.com/cse/360cse_12.0.1412.0.exe">360极速浏览器</a>。
			</div>
		</div>
	</div>
	<div style="margin: 50px;font-size: 20px;">
		<div style="width: 800px;margin: 0 auto;">
			<div style="font-size: 30px;margin-bottom: 25px;">调用方法</div>
			<div>
				<p>方法一：</p>
				<p>头部区域&lt;head&gt;中插入以下代码:</p>
				<article style="display: flex;font-size: 16px;">
					<div style="width: 35px;">
						<code>
								1<br />
							</code>
					</div>
					<div style="flex: 1;">
						<code style="font-size: 16px;">
								&lt;script type="text/javascript" src="fdPlayer.js"&gt;&lt;/script&gt;
							</code>
					</div>
				</article>
				<p>主体区域&lt;body&gt;插入插入以下代码:</p>
				<article style="display: flex;">
					<div style="width: 35px;">
						<code style="font-size: 16px;">
								1<br />
								2<br />
								3<br />
								4<br />
								5<br />
								6<br />
								7<br />
								8<br />
								9<br />
								10<br />
								11<br />
								12<br />
								13<br />
								14<br />
								15<br />
								16<br />
								17<br />
								18<br />
								19<br />
								20<br />
								21<br />
								22<br />
								23<br />
								24<br />
								25<br />
								26<br />
							</code>
					</div>
					<div style="flex: 1;">
						<code style="font-size: 16px;">
								&lt;script type="text/javascript" src="fdPlayer.js"&gt;&lt;/script&gt;<br />
								&lt;script&gt;<br />
								&nbsp;&nbsp;player = {<br />
								&nbsp;&nbsp;&nbsp;&nbsp;"width": 视频宽度,<br />
								&nbsp;&nbsp;&nbsp;&nbsp;"height": 视频高度,<br />
								&nbsp;&nbsp;&nbsp;&nbsp;"viewWindow": "player",&nbsp;&nbsp;//播放视频的块区域ID<br />
								&nbsp;&nbsp;&nbsp;&nbsp;"img": "视频预览图路径",<br />
								&nbsp;&nbsp;&nbsp;&nbsp;"video":[<br />
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{<br />
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"defaultID":默认从第几个文件开始播放<br />
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},{<br />
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"name": "视频名称",<br />
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"url":"视频地址",<br />
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"subtitles":[<br />
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{<br />
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"defaultID":默认字幕，0为空<br />
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},{<br />
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"name":"字幕名称",<br />
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"url":"字幕地址"<br />
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br />
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;]<br />
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br />
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;]<br />
								&nbsp;&nbsp;}<br />
								&nbsp;&nbsp;fdplayer(JSON.stringify(player))&nbsp;&nbsp;//此处确保为纯文本JSON<br />
								&lt;/script&gt;<br />
							</code>
					</div>
				</article>
			</div>
			<div>
				<p>方法二:</p>
				<p>
					直接主体区域&lt;body&gt;插入插入以下代码:
				</p>
				<article style="display: flex;">
					<div style="width: 35px;">
						<code style="font-size: 16px;">
								1<br />
								2<br />
								3<br />
								4<br />
								5<br />
								6<br />
								7<br />
								8<br />
								9<br />
								10<br />
								11<br />
								12<br />
								13<br />
								14<br />
								15<br />
								16<br />
								17<br />
								18<br />
								19<br />
								20<br />
								21<br />
								22<br />
								23<br />
								24<br />
								25<br />
								26<br />
								27<br />
							</code>
					</div>
					<div style="flex: 1;">
						<code style="font-size: 16px;">
								&lt;div id="player" style="margin: 0 auto;width: 800px;height: 600px;"&gt;&lt;/div&gt;<br />
								&lt;script type="text/javascript" src="fdPlayerTouch.js"&gt;&lt;/script&gt;<br />
								&lt;script&gt;<br />
								&nbsp;&nbsp;player = {<br />
								&nbsp;&nbsp;&nbsp;&nbsp;"width": 视频宽度,<br />
								&nbsp;&nbsp;&nbsp;&nbsp;"height": 视频高度,<br />
								&nbsp;&nbsp;&nbsp;&nbsp;"viewWindow": "player",&nbsp;&nbsp;//播放视频的块区域ID<br />
								&nbsp;&nbsp;&nbsp;&nbsp;"img": "视频预览图路径",<br />
								&nbsp;&nbsp;&nbsp;&nbsp;"video":[<br />
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{<br />
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"defaultID":默认从第几个文件开始播放<br />
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},{<br />
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"name": "视频名称",<br />
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"url":"视频地址",<br />
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"subtitles":[<br />
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{<br />
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"defaultID":默认字幕，0为空<br />
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},{<br />
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"name":"字幕名称",<br />
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"url":"字幕地址"<br />
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br />
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;]<br />
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br />
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;]<br />
								&nbsp;&nbsp;}<br />
								&nbsp;&nbsp;fdplayer(JSON.stringify(player))&nbsp;&nbsp;//此处确保为纯文本JSON<br />
								&lt;/script&gt;<br />
							</code>
					</div>
				</article>
			</div>
			<div>
				<p>方法三（受Gitee网速限制，无需下载）:</p>
				<p>
					直接主体区域&lt;body&gt;插入插入以下代码:
				</p>
				<article style="display: flex;">
					<div style="width: 35px;">
						<code style="font-size: 16px;">
								1<br />
								2<br />
								 <br />
								3<br />
								4<br />
								5<br />
								6<br />
								7<br />
								8<br />
								9<br />
								10<br />
								11<br />
								12<br />
								13<br />
								14<br />
								15<br />
								16<br />
								17<br />
								18<br />
								19<br />
								20<br />
								21<br />
								22<br />
								23<br />
								24<br />
								25<br />
								26<br />
								27<br />
							</code>
					</div>
					<div style="flex: 1;">
						<code style="font-size: 16px;">
								&lt;div id="player" style="margin: 0 auto;width: 800px;height: 600px;"&gt;&lt;/div&gt;<br />
								&lt;script type="text/javascript" src="https://shanmaomaoymmm.gitee.io/fdplayer/fdPlayer.js"&gt;&lt;/script&gt;<br />
								&lt;script&gt;<br />
								&nbsp;&nbsp;player = {<br />
								&nbsp;&nbsp;&nbsp;&nbsp;"width": 视频宽度,<br />
								&nbsp;&nbsp;&nbsp;&nbsp;"height": 视频高度,<br />
								&nbsp;&nbsp;&nbsp;&nbsp;"viewWindow": "player",&nbsp;&nbsp;//播放视频的块区域ID<br />
								&nbsp;&nbsp;&nbsp;&nbsp;"img": "视频预览图路径",<br />
								&nbsp;&nbsp;&nbsp;&nbsp;"video":[<br />
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{<br />
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"defaultID":默认从第几个文件开始播放<br />
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},{<br />
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"name": "视频名称",<br />
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"url":"视频地址",<br />
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"subtitles":[<br />
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{<br />
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"defaultID":默认字幕，0为空<br />
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},{<br />
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"name":"字幕名称",<br />
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"url":"字幕地址"<br />
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br />
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;]<br />
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br />
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;]<br />
								&nbsp;&nbsp;}<br />
								&nbsp;&nbsp;fdplayer(JSON.stringify(player))&nbsp;&nbsp;//此处确保为纯文本JSON<br />
								&lt;/script&gt;<br />
							</code>
					</div>
				</article>
			</div>
		</div>
	</div>
	<div style="margin: 50px;font-size: 20px;">
		<div style="width: 800px;margin: 0 auto;">
			<p>
				作者：Qisato<br />
				邮箱：Qisato@126.com
			</p>
			<div style="text-align: center;font-size: 25px;">
				<p>
					程序源代码遵循MPL2.0开源协议<br />
					如若转载请注明出处
				</p>
			</div>
			<p style="text-align: center;">
				<span style="font-size:20px">项目地址</span><br/>
                Github：<a style="color: #424242;"
					href="https://github.com/shanmaomaoymmm/FDplayer-Touch">https://github.com/shanmaomaoymmm/FDplayer</a><br/>
                Gitee：<a style="color: #424242;"
					href="https://gitee.com/shanmaomaoymmm/FDplayer">https://gitee.com/shanmaomaoymmm/FDplayer</a>
			</p>
		</div>
	</div>
	<div style="margin: 100px 0px 50px 0px;font-size: 20px;display:none;">
		<div style="width: 800px;margin: 0 auto;">
			<p>
				恰饭：
			</p>
			<div style="width: 800px;display: flex;text-align: center;margin: 0 auto;">
				<div style="flex: 1;">
					<img src="https://shanmaomaoymmm.gitee.io/shanmoamoaymmmprojectdeommedia/FDPlayer-Touch/img/img06.jpg"
						style="width: 200px;" />
				</div>
				<div style="flex: 1;">
					<img src="https://shanmaomaoymmm.gitee.io/shanmoamoaymmmprojectdeommedia/FDPlayer-Touch/img/img08.jpg"
						style="width: 200px;" />
				</div>
				<div style="flex: 1;">
					<img src="https://shanmaomaoymmm.gitee.io/shanmoamoaymmmprojectdeommedia/FDPlayer-Touch/img/img07.jpg"
						style="width: 200px;" />
				</div>
			</div>
			<div style="text-align: center;font-size: 30px;">
				<p>
					可怜可怜 给点就行
				</p>
			</div>
		</div>
	</div>
	<div style="text-align: right;margin: 20px 20px 0px 0px;">
		<i style="font-size: 14px;">时间仓促，网页以后再改</i>
	</div>

</body>

</html>